<!-- **  分页组件 * -->
<script setup lang="ts">
import { reactive, watch } from 'vue';

const props = withDefaults(
  defineProps<{
    pagination?: AntDesign.TablePaginationConfig;
  }>(),
  {
    pagination: () => ({
      current: 1,
      pageSize: 10,
      total: 0
    })
  }
);

const pageState = reactive({
  current: props.pagination.current,
  pageSize: props.pagination.pageSize,
  total: props.pagination.total
});

watch(
  () => props.pagination,
  val => {
    pageState.current = val.current;
    pageState.pageSize = val.pageSize;
    pageState.total = val.total;
  },
  {
    deep: true
  }
);

const emits = defineEmits(['change', 'showSizeChange']);

const handlePageChange = (page: number, pageSize: number) => {
  emits('change', page, pageSize);
};

const handlePageSizeChange = (current: number, size: number) => {
  emits('showSizeChange', current, size);
};
</script>

<template>
  <div class="mt-4 flex justify-end">
    <APagination
      v-model:current="pageState.current"
      v-model:page-size="pageState.pageSize"
      :total="pageState.total"
      show-size-changer
      show-quick-jumper
      :show-total="(total: any) => `总共 ${total} 条`"
      @change="handlePageChange"
      @show-size-change="handlePageSizeChange"
    />
  </div>
</template>

<style scoped lang="scss"></style>
